<template>
    <div class="course-page" ref="page" @scroll="handleScroll($event)">
        <div class="top" v-if="!turnTop">
            <div class="arrow-left" @click="$router.go(-1)">
            <img src="../assets/images/album_main_back.png" alt="" />
        </div>
        <div class="list-right">
            <img
              class="wechat"
              src="../assets/images/album_main_wechat.png"
              alt=""
            />
            <img src="../assets/images/album_main_pyq.png" alt="" />
            <img class="dots" src="../assets/images/album_main_more.png" alt="" />
        </div>
        </div>
        <div class="top" style="backgroundColor:#fff" v-if="turnTop">
            <div class="arrow-left" @click="$router.go(-1)">
                <img src="../assets/images/back_b_icon.png" alt="" />
            </div>
        <div class="list-right">
            <img
              class="wechat"
              src="../assets/images/tittle_share_wechat.png"
              alt=""
            />
            <img src="../assets/images/tittle_share_pyq.png" alt="" />
            <img class="dots" src="../assets/images/black_more.png" alt="" />
        </div>
        </div>
        <div 
        class="coursebg"
        v-if="course" 
        :style="{'background-image': 'url(https://pic.ecook.cn/web/'+course.himg+'.jpg!wl280)',}"
        >
        <div :class="['videoContent',{'play':playVideo}]" @click.stop="showControl">
          <video class="video_block" 
          :src="trailerUrl"
          preload="auto"
          ref="video"
          @timeupdate="ontimeupdateFun"
          @loadeddata="onloadeddataFun"
          @ended="onendedFun"
          ></video>
          <div :class="['video_control' ,{'hidden':!showSlider}]">
            <div class="leftTime">{{timeleft | time}}</div>
            <van-slider 
            v-model="currentPlay" 
            bar-height="2px" 
            @input='sliderInputFun' 
            @drag-start="startFun" 
            @drag-end="endFun" 
            button-size='14px' 
            active-color="#ee0a24" />
            <div class="rightTime">{{timeright | time}}</div>
          </div>
          <div class="videoSlider">
            <van-slider 
            v-model="currentPlay" 
            bar-height="1px" 
            button-size='0px' 
            active-color="#ee0a24" />
          </div>
          <div class="video_play" v-if="!videoplay" >
            <img src="../assets/images/jz_play_normal.png" alt="" @click.stop="playV">
          </div>
          <div :class="['video_pause',{'none':!showSlider}]" v-if="videoplay" >
            <img src="../assets/images/jz_pause_normal.png" alt="" @click.stop="playV">
          </div>
        </div>
        <div class="control" v-if="!playVideo">
          <div class="playIcon" v-if="trailerUrl==''">
            <van-icon name="play-circle-o" color="#fff" size='45px' @click="playvideo" />
          </div>
          <div class="videoPreview" v-else @click="play">
            <div class="p">
              <van-icon name="play-circle-o" color="#fff" size='25px' />
              <div class="preview">预览课程片花</div>
            </div>
          </div>
        </div>
        </div>
        <div class="courseCon" v-if="course">
            <div class="coursename">{{course.title}}</div>
            <div class="courseInfo">
              <div class="courseScore">
                <div class="score">{{course.score}}</div>
                <div class="scoretitle">课程评分</div>
              </div>
              <div class="line"></div>
              <div class="coursemula" @click="mula">
                <div class="mulaIcon">
                  <img src="../assets/images/icon_course_formula.png" alt="">
                </div>
                <div class="mulatitle">课程配方</div>
              </div>
            </div>
            <div class="authorInfo">
              <div class="author" @click.stop="goAuthor(autorInfo.id)">
                <img class="person" :src="'https://pic.ecook.cn/web/'+autorInfo.imageid+'.jpg!s1'" alt="">
                <div class="nickname">{{autorInfo.nickname}}</div>
              </div>
              <div class="profile" v-html="profile"></div>
              <div class="checkTeacher" @click="addfollow(autorInfo.id)" v-if="!isfollow">
                <img src="../assets/images/关注.png" alt="">
                关注老师
              </div>
              <div class="checkTeacher selected" @click="addfollow(autorInfo.id)" v-if="isfollow">
                <img src="../assets/images/已关注.png" alt="">
                取消关注
              </div>
            </div>
            <div class="courseRecommend">
              <div class="RecomTitle">课程简介</div>
              <div class="images" v-if="imgs">
                <div class="img" v-for="(item,index) in imgs" :key="index" :style="{'background-image':'url(https://pic.ecook.cn/web/'+item+'.jpg!wl280)'}"></div>
              </div>
              <div class="description">{{description}}</div>
            </div>
            <div class="cuorsePoints">
              <div class="pointsTitle">课程要点</div>
              <div class="points" v-html="points"></div>
            </div>
            <div class="courseCrowd">
              <div class="crowdTitle">适用人群</div>
              <div class="crowd">{{crowd}}</div>
            </div>
            <div class="courseDifficulty">
              <div class="difficultyTitle">课程难度</div>
              <div class="stars">
                <img v-if="difficulty==1" style="width:14px" src="../assets/images/one_star_max_big.png" alt="">
                <img v-if="difficulty==2" style="width:32px" src="../assets/images/two_star_max_big.png" alt="">
                <img v-if="difficulty==3" style="width:48px" src="../assets/images/three_star_max_big.png" alt="">
                <img v-if="difficulty==4" style="width:64px" src="../assets/images/four_star_max_big.png" alt="">
                <img v-if="difficulty==5" style="width:80px" src="../assets/images/five_star_max_big.png" alt="">
              </div>
            </div>
            <div class="courseTips">
              <div class="tipsTitle">小贴士</div>
              <div class="tips" v-html="tips"></div>
            </div>
            <div class="otherCourse">
              <div class="otherTitle">该作者的其他课程</div>
              <div class="courselist">
                <div class="courseItem" v-for="item in otherCourse" :key="item.id" @click="goOther(item.id)">
                  <div class="img" :style="{'background-image':'url(https://pic.ecook.cn/web/'+item.himg+'.jpg!wl280)'}"></div>
                  <div class="Itemtitle">{{item.title}}</div>
                  <div class="mask"></div>
                </div>
              </div>
            </div>
        </div>
        <div class="bottom">
          <div class="bottomleft" @click="buy">
            <div class="toptext">购买课程 ¥{{price}}.0</div>
            <div class="bottomtext">{{ecookCoin}}厨币可兑换</div>
          </div>
          <div class="bottomright">
            <div class="logo">
              <img src="../assets/images/me_vip_icon_yellow.png" alt="">
            </div>
            <div class="text">会员免费学</div>
          </div>
        </div>
        <div class="loading" v-if="loading">
          <div class="loadingImg">
          <img src="../assets/images/loading_ecook.png" alt="">
        </div>
    </div>
    </div>
</template>

<script>
import {getOnlineTeachByIdtData,getOtherOnlineTeachListByIdtData} from '../api/class'
export default {
    data() {
        return {
            profile:null,//作者简洁
            autorInfo:null,//作者信息
            course:null,//课程详情
            description:null,//描述
            points:null,//要点
            crowd:null,//适用人群
            imgs:null,//简介图片
            difficulty:null,//难度指数
            tips:null,//小贴士
            otherCourse:null,//该作者的其他课程
            price:null,//钱
            ecookCoin:null,//厨币
            turnTop:false,
            loading:true,
            isfree:null,//是否免费
            isfollow:false,//关注
            trailerUrl:null,//预览视频
            viedoUrl:null,//视频
            playVideo:false,//播放
            timeleft:0,//左边时间
            timeright:0,//右边时间
            currentPlay:0,//当前播放时间
            videoplay:false,//视频播放
            showSlider:true,//滑块显示

        };
    },

    methods: {
        //获取数据
        getOnlineTeachByIdtFun(id){
          getOnlineTeachByIdtData({id}).then(data=>{
            console.log(data);
            if (data.data){
              this.loading = false
              if (data.data.details) {
                this.profile = data.data.details.profile;//作者简洁
                this.description = data.data.details.description;//描述
                this.points = data.data.details.points;//描述
                this.crowd = data.data.details.crowd;//适用人群
                this.tips = data.data.details.tips;//适用人群
                //简介图片
                if (data.data.details.imageids && data.data.details.imageids.length>9) {
                    data.data.details.imageids = data.data.details.imageids.split(",")
                    this.imgs = data.data.details.imageids
                }
              }
              this.autorInfo = data.data.teacher;//作者信息
              this.course = data.data
              this.difficulty = data.data.difficulty
              this.price = data.data.price
              this.ecookCoin = data.data.ecookCoin
              this.isfree = data.data.free
              this.trailerUrl = data.data.trailer
              this.viedoUrl = data.data.vedio

              //重置关注
              let tempfollow = JSON.parse(window.localStorage.getItem("follows"))
              if (tempfollow) {
                let index = tempfollow.findIndex(item=>item.id==this.autorInfo.id)
                if (index!=-1) {
                  this.isfollow = true
                }else{
                  this.isfollow = false
                }
              }
            }else{
              this.$toast("加载失败")
              this.$router.push("/class")
            }
          })
        },
        //该作者其他相关课程
        getOtherOnlineTeachListByIdtFun(id){
          getOtherOnlineTeachListByIdtData({id}).then(data=>{
            console.log(data);
            if (data.list) {
              this.otherCourse = data.list
            }
          })
        },
        //实时滚动改变状态
        handleScroll(e){
            if (e.target.scrollTop<=180) {
                this.turnTop = false
            }else{
                this.turnTop = true
            }
        },  
        //作者信息
        goAuthor(id){
          this.$router.push({path:'/author',query:{id}})
        },
        //跳转相关课程专辑
        goOther(id){
          this.$refs.page.scrollTop = 0
          this.loading = true
          this.getOnlineTeachByIdtFun(id)
          this.getOtherOnlineTeachListByIdtFun(id)
        },
        //课程配方
        mula(){
          if (!this.isfree) {
            this.$toast("请先购买课程")
          }else{
            this.$toast("暂无该资料")
          }
        },
        //关注作者
        addfollow(id){
          let tempfollow = JSON.parse(window.localStorage.getItem("follows"))
          tempfollow = tempfollow==null?[]:tempfollow
          let index = tempfollow.findIndex(item=>item.id==id)
          this.isfollow=!this.isfollow
          if (this.isfollow) {
              if (index==-1) {
                  tempfollow.push({
                      id,
                      imageid:this.autorInfo.imageid,
                      profile:this.autorInfo.profile,
                      star:this.autorInfo.star,
                      name:this.autorInfo.nickname
                  })
              }
          }else{
              tempfollow.splice(index,1)
          }
          window.localStorage.setItem("follows",JSON.stringify(tempfollow))
        },
        //购买课程
        buy(){
          let daylist = JSON.parse(window.localStorage.getItem("signlist"))
          daylist=daylist==null?[]:daylist
          let cookCoin = 0
          for (let i = 0; i < daylist.length; i++) {
            cookCoin +=30
          }
          if (this.ecookCoin>=cookCoin) {
            this.$toast("厨币不足！")
          }else{
            this.$toast("购买成功！")
          }
        },
        //播放付费视频
        playvideo(){
          if (!this.isfree) {
            this.$toast("请先购买课程")
          }
        },
        //播放视频
        play(){
          this.playVideo = true
          this.$refs.video.play()
          setTimeout(()=>{
            this.showSlider = false
          },500)
          this.videoplay = true
        },
        //实时获取视频进度
        ontimeupdateFun(){
          this.timeleft = this.$refs.video.currentTime//实时获取视频播放时间
          this.currentPlay = 100*(this.timeleft/this.timeright)
        },
        //等视频加载完
        onloadeddataFun(){
          this.timeright = this.$refs.video.duration//获取总时长
        },
        //视频播放完
        onendedFun(){
          this.playVideo = false 
        },
        //播放暂停
        playV(){
          this.videoplay = !this.videoplay
          if (this.videoplay) {
            this.$refs.video.play()
            this.showSlider = false
          }else{
            this.$refs.video.pause()
          }
        },
        //滑块随时间实时变化
        sliderInputFun(value){
          let currentTime = (value / 100) * this.timeright;
          this.timeleft = currentTime
          this.$refs.video.currentTime = currentTime
        },
        //暂停
        showControl(){
          this.showSlider = !this.showSlider
          setTimeout(() => {
            this.showSlider = false
          }, 3000);
        },
        //开始拖动
        startFun(){
          this.videoplay = false
          this.$refs.video.pause()
        },
        //结束拖动
        endFun(){
          this.videoplay = true
          this.showSlider = false
          this.$refs.video.play()
        }

    },
    created() {
        this.getOnlineTeachByIdtFun(this.$route.query.id)
        this.getOtherOnlineTeachListByIdtFun(this.$route.query.id)
    },
    filters:{
      //过滤时间
      time(value){
        let leftTime = parseInt(value/60)>=10?parseInt(value/60):'0'+parseInt(value/60)
        let rightTime = parseInt(value%60)>=10?parseInt(value%60):'0'+parseInt(value%60)
        return `${leftTime}:${rightTime}`
      }
    }
};
</script>

<style lang="less" scoped>
.course-page{
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    position: relative;

  .top {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 99;
    height: 35px;
    padding: 5px;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    // background-image: linear-gradient(#9d9fa3, transparent);

    .arrow-left {
      width: 15%;
      display: flex;
      align-items: center;

      & > img {
        width: 10px;
        height: 18px;
        display: inline-block;
        padding-left: 5px;
      }
    }

    .list-right {
      width: 50%;
      display: flex;
      justify-content: flex-end;
      align-items: center;

      & > img {
        padding: 0 15px;
        width: 20px;
        height: 20px;
        display: block;
      }

      .wechat {
        width: 23px;
      }

      .dots {
        height: 5px;
      }
    }
  }
  // 背景图
  .coursebg{
    width: 100%;
    height: 180px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: relative;

    .control{
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;

      .videoPreview{
        width: 130px;
        padding: 8px 0;
        background-color: rgba(0, 0, 0, 0.4);
        border-radius: 20px;
        .p{
          display: flex;
          align-items: center;
          justify-content: center;
          color: #fff;
          font-size: 13px;

          .preview{
            margin-left: 5px;
          }
        }
      }
    }
    .videoContent{
      width: 100%;
      height: 100%;
      position: absolute;
      z-index: -1;
      .video_block{
        width: 100%;
        height: 100%;
        background-color: #000;
        object-fit:fill;
      }
      .video_control{
        width: 100%;
        height: 40px;
        padding: 0 5px;
        box-sizing: border-box;
        position: absolute;
        z-index: 1;
        bottom: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-image: linear-gradient(transparent,#000);
        transition: all 0.3s linear;
        transform: translateY(0);

        .leftTime{
          text-align: center;
          width: 80px;
          color: #fff;
          font-size: 13px;
        }
        .rightTime{
          text-align: center;
          width: 80px;
          color: #fff;
          font-size: 13px;
        }
      }
      .video_play{
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        
        &>img{
          width: 40px;
          height: 40px;
        }
      }
      .video_pause{
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        display: flex;
        align-items: center;
        justify-content: center;

        &>img{
          width: 40px;
          height: 40px;
        }
      }
      .videoSlider{
        width: 100%;
        position: absolute;
        bottom: 1px;
      }
      .hidden {
        transform: translateY(40px);
      }
      .none{
        display: none;
      }
    }
    .play{
      z-index: 1;
    }
  }
  .courseCon{
    position: relative;
    z-index: 1;
    margin-bottom: 60px;
    background-color: #fafafa;

    .coursename{
      padding: 25px 15px;
      font-size: 18px;
      font-weight: bold;
      letter-spacing: 0.5px;
      line-height: 22px;
    }
    .courseInfo{
      padding: 0 15px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 45px;

      .line{
        width: 1px;
        height: 40px;
        background-color: #ccc;
      }
      .coursemula,
      .courseScore{
        width: 150px;
        text-align: center;
      }
      .coursemula{
        .mulaIcon{
          width: 25px;
          height: 25px;
          display: inline-block;
        }
        .mulatitle{
          font-size: 14px;
          margin-top: 8px;
          color: #feb34d;
        }
      }
      .courseScore{
        .score{
          font-size: 20px;
          font-weight: bold;
        }
        .scoretitle{
          font-size: 14px;
          margin-top: 13px;
        }
      }
    }
    .authorInfo{
      padding: 0 15px;
      position: relative;
      .author{
        position: absolute;
        top: -18px;
        left: 0;
        right: 0;
        margin: 0 auto;
        text-align: center;
        .person{
          width: 40px;
          height: 40px;
          border-radius: 50%;

        }
        .nickname{
          font-size: 14px;
          margin-top: 5px;
          font-weight: 700;
        }
      }
      .profile{
        padding: 55px 20px 10px 20px;
        margin-bottom: 15px;
        white-space: pre-wrap;
        line-height: 22px;
        background-color: #fcf3ec;
        border-radius: 6px;
        font-size: 15px;
        box-sizing: border-box;
      }
      .checkTeacher{
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #f1b866;
        padding: 10px 0;
        background-color: #f2f2f2;
        border-radius: 6px;
        &>img{
          width: 15px;
          height: 15px;
          margin-right: 5px;
        }
      }
      .selected{
        background-color: #fcf3ec!important;
        color: #ccc;
        font-weight: 700;
      }
    }
    .courseRecommend{
      margin-top: 40px;
      margin-bottom: 30px;

      .RecomTitle{
        padding: 10px 15px 20px 15px;
        font-size: 16px;
        font-weight: 700;
      }
      .images{
        width: 100%;
        white-space: nowrap;
        overflow-y: scroll;
        margin-bottom: 20px;
        .img{
          display: inline-block;
          width: 300px;
          height: 160px;
          border-radius: 6px;
          background-repeat: no-repeat;
          background-position: center;
          background-size: cover;
          margin-right: 15px;
        }
        .img:first-child{
          margin-left: 15px;
        }
      }
      .description{
        padding: 0 15px;
        line-height: 22px;
        font-size: 15px;
      }
    }
    .cuorsePoints{
      padding: 0 15px;
      margin-bottom: 30px;
      .pointsTitle{
        padding: 10px 0 20px 0;
        font-weight: 700;
      }
      .points{
        white-space: pre-wrap;
        line-height: 22px;
        letter-spacing: 0.5px;
        font-size: 15px;
      }
    }
    .courseCrowd{
      padding: 0 15px;
      margin-bottom: 30px;
      .crowdTitle{
        padding: 10px 0 20px 0;
        font-weight: 700;
      }
      .crowd{
        line-height: 22px;
        font-size: 15px;
      }
    }
    .courseDifficulty{
      padding: 0 15px;
      margin-bottom: 30px;

      .difficultyTitle{
        padding: 10px 0 20px 0;
        font-weight: 700;
      }
      .stars{
        &>img{
          // width: 48px;
          height: 12px;
        }
      }
    }
    .courseTips{
      padding: 0 15px;
      margin-bottom: 30px;

      .tipsTitle{
        padding: 10px 0 20px 0;
        font-weight: 700;
      }
      .tips{
        white-space: pre-wrap;
        line-height: 22px;
        letter-spacing: 0.5px;
        font-size: 15px;
      }
    }
    .otherCourse{
      padding-bottom: 30px;

      .otherTitle{
        padding: 10px 15px 20px 15px;
        font-weight: 700;
      }
      .courselist{
        width: 100%;
        white-space: nowrap;
        overflow-y: scroll;
        .courseItem{
          display: inline-block;
          width: 300px;
          height: 160px;
          margin-right: 15px;
          border-radius: 6px;
          overflow: hidden;
          position: relative;

          .img{
            width: 100%;
            height: 100%;
            border-radius: 6px;
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
          }
          .Itemtitle{
            position: absolute;
            bottom: 15px;
            left: 8px;
            color: #f2f2f2;
            font-weight: 700;
            letter-spacing: 0.5px;
            font-size: 16px;
            z-index: 1;
          }
          .mask{
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            width: 100%;
            height: 50px;
            color: transparent;
            background-image: linear-gradient(transparent,rgb(87, 84, 84));
          }
        }
        .courseItem:first-child{
          margin-left: 15px;
        }
      }
    }
  }
  .bottom{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    background-color: #fff;
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .bottomleft{
      width: 162px;
      height: 46px;
      margin: 0 7.5px 0 15px;
      text-align: center;
      border-radius: 6px;
      background-color: #fefaef;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      .toptext{
        color: #f0b65f;
        font-weight: 700;
        letter-spacing: 0.5px;
        margin-bottom: 8px;
        font-size: 15px;
      }
      .bottomtext{
        font-size: 12px;
        color: #eeb368;
      }
    }
    .bottomright{
      width: 162px;
      height: 46px;
      margin: 0 15px 0 7.5px;
      text-align: center;
      border-radius: 6px;
      background-image: linear-gradient(90deg,#f3d076,#b68d1d);
      display: flex;
      align-items: center;
      justify-content: center;

      .logo{
        width: 20px;
        display: inline-block;
        margin-right: 8px;
      }
      .text{
        display: inline-block;
        color: #fff;
        font-size: 15px;
        font-weight: 700;
        letter-spacing: 0.5px;
      }
    }
  }
  .loading{
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;

    .loadingImg{
      width: 60px;
      height: 60px;
      background-color: #fff;
      border-radius: 8px;
      box-shadow: 0px 0px 5px #ccc;
      display: flex;
      align-items: center;
      justify-content: center;

      &>img{
        width: 22px;
        height: 22px;
        display: block;
      }
    }
  }
}
</style>